import React, { Component } from 'react';
import { Form, Icon, Input, Button } from 'antd';
import { message } from 'antd';
import { Redirect } from 'react-router-dom';
import storageUtils from '../../utils/storage';
import memoryUtil from '../../utils/memoryUtil'


import logo from './images/logo.png'
import './login.less'

class Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        // alert('表单提交');
        // 取到输入数据
        // const { getFieldsValue, getFieldValue } = this.props.form;
        // console.log(getFieldsValue());  // {username: "123", password: "456"}
        // console.log(getFieldValue('username')); // 123
        // console.log(getFieldValue('password')); // 456

        // 统一验证
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // 表单验证通过，去发送请求数据
                console.log('Received values of form: ', values);

                // api login
                // const result = await reqLogin(username, password);
                // MOCK
                const result = {
                    status: 0,
                    data: {
                        "_id": "id_bababababa",
                        "password": "pwd_babababa",
                        "username": "admin",
                        "create_time": 1234545,
                    }
                };
                if (result.status === 0) {
                    // login success
                    // store user info to localStorage
                    const user = result.data;
                    // localStorage 存储字符串数据
                    // localStorage.setItem('user_key', JSON.stringify(user));
                    storageUtils.saveUser(user);
                    // 保存到内存里
                    memoryUtil.user = user;

                    // 路由跳转，
                    // history.push     可以回退
                    // history.replace  不可以回退 (登录成功后，我们不需要回退到登录页面)
                    // history.goBack   回退
                    this.props.history.replace('/');
                    message.success('验证成功');
                } else {
                    // login failed
                    message.error(result.msg);
                }
                
            } else {
                // message.error('验证失败');
            }
        });
    };

    validatePwd = (rule, value, callback) => {
        value = value.trim();
        if (!value) {
            callback('密码不能为空');
        } else if (value.length < 4) {
            callback('密码长度不能小于4');
        } else if (value.length > 12) {
            callback('密码长度不能大于12');
        } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
            callback('密码应该只包含英文字母，数字，下划线');
        } else {
            callback(); // 验证通过时必须callback()
        }
    }

    render() {
        // 读取localStorage里的用户信息，如果有直接转到管理界面
        const user = memoryUtil.user;
        if (user._id) {
            return <Redirect to="/" />
        }

        const { getFieldDecorator } = this.props.form
        return (
            <div className="login">
                <div className="login-header">
                    <img src={logo} alt="logo" />
                    <h1>React - Antd：后台管理系统</h1>
                </div>
                <div className="login-content">
                    <h2>用户登陆</h2>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {
                                // getFieldDecorator()()
                                // getFieldDecorator是一个高阶函数
                                getFieldDecorator('username', {
                                    initialValue: '', // 定义初始值
                                    // 配置对象
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入用户名', },
                                        { min: 4, message: '长度不能小于4'},
                                        { max: 12, message: '长度不能大于12'},
                                        { pattern: /^[a-zA-Z0-9_]+$/, message: '英文字母，数字，下划线'},
                                    ],
                                })(
                                    <Input
                                        prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                        placeholder="用户名"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password', {
                                    initialValue: '',
                                    // 配置对象
                                    rules: [
                                        // 自定义校验（注意，callback 必须被调用）
                                        { validator: this.validatePwd }
                                    ],
                                })(
                                    <Input
                                        prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                        type="password"
                                        placeholder="密码"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

// 利用Form.create()方法包装组件，生成一个新的组件
// 新的组件会向form传递一个属性： 属性名: form

/*
高阶函数
接收的参数是函数，或者返回值是函数

本质是一个函数
传入一个组件（函数），返回一个新的组件（函数）
*/
const WarpperForm = Form.create()(Login);

export default WarpperForm; // <Form(Login) />
/*
用户名密码规则
1. 必须输入
2. 长度限制在 4 < leng < 12
3. 英文字母，数字，下划线
*/
